Vue 中既可以输入也可以下拉选择(改进版) |
您所在的位置：网站首页 › select不可选择 vue › Vue 中既可以输入也可以下拉选择(改进版) |
Vue 中既可以输入也可以下拉选择(改进版)
|
项目场景：
项目场景：由于前些天，弄了一个下拉选择，也可以输入的，input输入框，但我感觉效果并不是很优美，所以今天对以前的代码，改进并进行优化。达到一个完美的效果。代码CV就可以用前提是你得将数据参数改为你的。 问题描述昨天的代码，参照网络上写的，但是我感觉有些许问题。 # 例如 :disabled="IsDisabled"虽然报错不影响效果，到就是别捏。 Property or method “xxxx“ is not defined on the instance but referenced during render. Vue报错 解决方案： 1：表单功能解决在表单中使用 标签 方法中： XXXtment() { getxxxInfo().then(data => { if (data.code === 200) { this.xxxList = data.data } else { this.$message.error(data.msg); } }) },只要在页面一加载就执行该方法，数据装入xxxlist中。 2：表单样式虽然上诉功能是已经实现了，但样式缺不尽人意对于强迫症的我，是难以接受的。 例如：这样的参差不齐，肯定验收不了！那就改
使用div标签把整个表单包住
在 里引入自定义样式 样式如下： .top { width: 620px; height: 100%; margin: 30px auto; border-radius: 10px; /*上 右 下 左*/ padding: 30px 0 15px 0; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1); text-align: left; .Data_select { ::v-deep .el-input__inner { width: 420px; } ::v-deep .block .el-input__inner { width: 210px; } ::v-deep .block div { width: 210px; float: left; } .u-icon { margin-left: 160px; color: #666; z-index: 9999; } } .U_btn { display: flex; justify-content: center; .u_preser { margin-right: 10px; } } }问题解释： device ：是判断手机端还是pc端的，你看你需求加与不加 # 定义 computed: { ...mapState({ device: state => state.app.device, }), }, # 方法 methods: { openCustomerDialog(e) { this.customerDialog = true }, } 总结：有问题，欢迎留言咨询！ |
【本文地址】
今日新闻 |
推荐新闻 |